@font-face {
  font-family: "iconfont"; /* Project id 2529172 */
  src: url('../font/iconfont.woff2?t=1620290085696') format('woff2'),
       url('../font/iconfont.woff?t=1620290085696') format('woff'),
       url('../font/iconfont.ttf?t=1620290085696') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*  
@media screen and (max-width: 700px)and( min-width:400) {
   html{
   	font-size: 5vw;
   }
}
@media screen and (max-width: 600px) {
    html{
 	    font-size: 4vw;
 } 
}

@media screen and (max-width: 800px) {
	    html{
	   	     font-size: 2vw;
	   }
}
@media screen and (max-width: 1000px) {
    html{
   	    font-size: 1vw;
    }
} */

/* html{
	font-size: 5vw;
} */
*{
	margin:0;
	padding: 0;
	/* font-size: 0.8rem; */
}
html{
	font-size:5vw;
}
li{
	list-style-type:none;
}
/* .app{
	position: relative;
} */
a{
	text-decoration:none;
}
body{
	/* font-size: 0.8rem; */
	word-break: initial;
	word-wrap:break-word;
}
.header{
    position:fixed ;
	top:0;
	line-height: 2rem;
	width: 100vw;
	height: 2rem;
	font-size: 1.25rem;
	text-align: center;
	background-color:rgba(107,138,189,0.5);
}
.header .r-img{
	width: 1rem;
	height: 1rem;
	margin: 0.5rem;
	position: absolute;
	left: 0;
}
.footer{
	position:fixed;
	bottom: 0;
	width: 100vw;
	border-bottom: 1px solid rgba(200,200,200,0.5);
	border-top: 1px solid rgba(200,200,200,0.5);
	text-align: center;
}
.bgd{
	background-color: rgba(107,138,189,0.5);
}
.right_1{
	position: absolute;
	right: 0.5rem;
	font-size: 1rem;
	color: #000000;
}
.right_2{
	position: absolute;
	right: 1.5rem;
	font-size: 1rem;
	color: #000000;
	margin-right:0.5rem ;
}
.footer ul{
 	width:100vw;

}
.footer ul>li{
	list-style: none;
	float: left;
    width:5rem;	
}
.black{
	color:gray;
	font-size:2rem;
}
.green{
	color:green;
	font-size:2rem;
}
.size{
	font-size: 0.8rem;
}
.news{
	/* display: none; */
	position: absolute;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}
.news .word{
	width: 100vw;
	position: absolute;
	overflow-y:scroll ;
}
.news .li_1{
	height:3rem;
	overflow:hidden;
	border-bottom: 1px solid rgba(200,200,200,0.5);
}
.news .li_1:hover{
	background-color: rgba(255,255,255,0.3);
}
.news .headPortrait{
	float: left;
	margin-top:0.25rem;
	margin-left:0.25rem;
	height: 2.5rem;
	width: 2.5rem;
}
.news .time{
	height: 2rem;
	margin-top: 0.5rem;
    float: right;
	margin-right: 0.5rem;
	font-size: 0.4rem;
}
.news .name{
	font-size: 1rem;
}
.news li{
	list-style: none;
}
.news .newss{
	font-size: 0.6rem;
}
.news .ul{
	float: left;
	height: 2rem;
	margin-top:0.5rem ;
	margin-left:0.5rem;
	width:10rem;
}
.addressList{
	display: none;
	position: relative;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}
.addressList ul li{
	height:2.5rem;
	line-height: 2.5rem;
	font-size: 0.8rem;
	border-bottom:1px solid #dedede;
}
.addressList ul li img{
	float: left;
	margin-top:0.5rem;
	margin-left:1rem;
	margin-right: 1rem;
	width: 1.5rem;
	height:1.5rem;
}
.addressList ul li .span{
	margin-left:3.5rem;
}
.discover{
	display: none;
	position: relative;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}
.discover ul li{
	font-size:0.8rem;
	height:2.5rem;
	line-height: 2.5rem;
	background-color:rgba(255,255,255,0.5);
	border-bottom: 1px solid rgba(200,200,200,0.5);
}
.discover ul li img{
	margin-top:0.75rem;
	float: left;
	margin-left:1rem;
	width: 1rem;
	height: 1rem;
}
.discover ul li span{
	margin-left:1rem ;
}
.discover .right{
	float: right;
	margin-right:1rem;
	margin-top:0.75rem;
}

.my{
	display: none;
	position: absolute;
	bottom: 4.1rem;
	top:2rem;
	width:100%;
	padding-bottom: 2.8rem;
	overflow-y:scroll ;
}

.my>ul>li:nth-child(1){
	margin-top:0.5rem;
	background-color: rgba(255,255,255,0.5);
	height: 5rem;
}
.my>ul>li{
	width: 100vw;
	font-size: 0.8rem;
	list-style: none;
    height:2rem;
}
.my .li{
	height:2.5rem;
	line-height: 2.5rem;
	border:1px solid rgba(200,200,200,0.5);
	background-color: rgba(255,255,255,0.5);
}
.my .right{
	margin-top:0.5rem;
	float: right;
}
.my>ul>li:nth-child(2){
	margin-top:0.5rem;
	height:2.5rem;
	line-height: 2.5rem;
	clear:left;
	background-color: rgba(255,255,255,0.5);
}

.my img{
	margin-left:1rem;
	margin-right:1rem;
	width: 0.8rem;
	height: 0.8rem;
}
.my>ul>li>div{
	float:left;
	width: 4rem;
	height: 4rem;
}
.my>ul>li>div>img{
	width: 3rem;
	height: 3rem;
	margin-left:1rem;
}
.my>ul>li>ul{
	width: 16rem;
	float: right;

}
.my>ul>li>ul>li{
	list-style: none;
}
.my>ul>li>ul>li:nth-child(1){
	font-size: 1rem;
	margin-bottom:0.5rem;
	margin-left:1rem;
}
.my>ul>li>ul>li:nth-child(2){
	font-size: 0.6rem;
	margin-bottom:0.5rem;
	margin-left:1rem;
}
.my>ul>li>ul>li:nth-child(2) img{
	float: right;
	margin-right:1rem;
	width: 0.6rem;
	height: 0.6rem;
}
.my>ul>li>ul>li:nth-child(3){
	margin-left:1rem;
	font-size: 0.6rem;
	margin-bottom:0.5rem;	
}
.my .sapn{
    display:block;
	float:left;
	margin-right:0.5rem;
	border: 1px solid rgba(200,200,200,0.5);
	border-radius:50%;
	padding:0.2rem;
}
.quit{
	font-size: 0.8rem;
	display: none;
}
.quit .header{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	background-color: rgba(255,155,255,0.5);
}
.quit .header .img{
	position: absolute;
	left:1rem;
	width: 1rem;
	height: 1rem;
	top:1rem;
}
.quit li{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	border-bottom:1px solid rgba(200,200,200,0.5);
}
.quit li img{
	position: absolute;
	right: 1rem;
	top:1rem;
	width: 1rem;
	height: 1rem;
}
.quit li span{
	margin-left: 1rem;
}
.quit .text_quit{
	margin-left: -1rem;
	text-align: center;
}
#Moments{
	font-size: 0.8rem;
	display: none;
}
#Moments .header{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	background-color: rgba(255,155,255,0.5);
}
#Moments .header .img{
	position: absolute;
	left:1rem;
	width: 1rem;
	height: 1rem;
	top:1rem;
}
#Moments .header .showImg{
	width:100vw;
	height:35vh;
}
#Moments .header .showImg .img_2{
	width:100%;
	height:100%;
}
#Moments .header .showPortrait{
	position:absolute;
	top:28vh;
	right:1rem;
	height:3rem;
	line-height: 3rem;
}
#Moments .header .showPortrait .img_3{
	width:3rem;
	height:3rem;
	float: left;
}
#Moments .header .showPortrait .left{
	float: left;
	margin-right:0.3rem;
}
#Moments .publish{
    position:absolute;
	top:0;
	right: 0;
	width:1rem;
	height:1rem;
	margin: 1rem;
}
#Moments .footer_f{
	display: none;
	position: fixed;
	bottom:0;
}
#Moments .footer_f li{
	width:100vw;
	list-style: none;
	height:2.5rem;
	border-bottom: 1px solid rgba(200,200,200,0.5);
	text-align: center;
	line-height: 2.5rem;
    clear:left;
}
#Moments .footer_f ul{
	background-color: rgba(255,255,255,0.5);
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}
#Moments .ul{
	padding-top:30vh;
	width:20rem;
	
}
#Moments .ul .li{
	border-bottom:1px solid rgba(200,200,200,0.8);
	margin-bottom:1rem;
	margin-top:1rem;
	width:20rem;
	display:inline-block;
}
#Moments .ul .img{
	float: left;
	width:2rem;
	height:2rem;
	margin-left:0.5rem;
	margin-right:0.5rem;
	margin-bottom:0.5rem;
}
#Moments .ul .div{
    float:right;
	margin-right:1rem ;
	left:3rem;
	width:16rem;
	white-space:normal;
	word-break:break-all;
}
/* 超出部分隐藏 */
.normal{
	white-space:normal;
	word-break:break-all;
}
.bgblue{
	background-color:wheat;
	color:blue;
}
#Moments .ul li{
	list-style: none;
}
#Moments .ul .li .little{
	background-color:rgba(200,200,200,0.5);
	float:right;
	width:2rem;
	text-align:center;
	border-radius: 0.5rem;
    	
}
#Moments .ul .li .bottom{
	margin-bottom:0.5rem;
}
#Moments .ul .li .bottom-top{
	margin-top:2rem;
}
#Moments .ul .li .bottom .img_name{
	width:0.6rem;
	height:0.6rem;
}
#Moments .ul .li .blue{
	color:blue;
}
#Moments .ul .li .del{
	color:blue;
}
#Moments .ul .li .like{
	display: none;
   	position:absolute;
	top:0;
	right:3rem;
	border-radius:0.3rem;
	overflow:hidden;
}
#Moments .ul .li .showtime{
	position:relative;
	height:1.5rem;
}
#Moments .ul .li .showtime .time1{
	font-size:20px;
}
#Moments .ul .li .like .likeli{
	float: left;
	width:4rem;
	font-size:0.8rem;
	height:1.5rem;
	background-color: rgba(0,0,0,0.8);
	line-height: 1.5rem;
	text-align: center;
	color: white;

	
}
#Moments .ul .li .like .likeli img{
    width:0.8rem;
	height:0.8rem;
	
	
}
#Moments .ul .li .div .bottom .imgli{
	width:16rem;
}
#Moments .ul .li .div .bottom-b{
    margin-bottom:1rem;
}
#Moments .ul .li .div .bottom .imgli img{
	width:100%;
	height:100%;
}
#Moments .delmoments{
	display: none;
	position:fixed;
	width:16rem;
	height:9rem;

	top:40vh;
	left:2rem;
	background-color: white;
	border-radius:0.5rem;
	text-align: center;
	overflow:hidden;
}
#Moments .delmoments li{
	list-style: none;
	height: 2.75rem;
	line-height: 2.75rem;
	
}
#Moments .delmoments li .divleft_1{
	width:7.975rem;
	height: 3.45rem;
	line-height:3.45rem ;
	border-right:0.05rem solid rgba(200,200,200,0.5);
	border-top:0.05rem solid rgba(200,200,200,0.5);
	float: left;
	font-weight:bold;
	
}
#Moments .delmoments li .divleft_2{
	width:7.975rem;
	height: 3.45rem;
	line-height: 3.45rem;
	border-top:0.05rem solid rgba(200,200,200,0.5);
	float: left;
	color:blue;
	
}
#Moments .delmoments .gray{
	color:gray;
}
#Moments .masklayer{
	display: none;
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.2);
	
}
#Moments .commentdiv{
	clear: both;
	display: none;
    position: relative;
	z-index: 100;
	background-color: rgb(240,240,240);
	height:3rem;
}
#Moments .commentdiv .textarea{
	position: absolute;
	font-size: 0.8rem;
	border: none;
	outline: none;
	width: 10rem;
	height:2rem;
	margin-left:0.5rem;
	margin-top: 0.5rem;
}
#Moments .commentdiv .commentsend{
	position: absolute;
	right: 0;
	bottom: 0.75rem;
	width:3rem;
	height:1.5rem;
	text-align: center;
	line-height: 1.5rem;
	border-radius:0.1rem;
}

#Moments .commentdiv .commentsend_gray{
	background-color: lightgrey;
	border: 1px solid rgba(155,155,155,0.8);
	color:gray;
}
#Moments .commentdiv .commentsend_green{
	background-color: #008000;
	color:white;
}
#Moments .commentdiv .commentimg{
	width: 1.5rem;
	height:1.5rem;
	position: absolute;
	right: 3.5rem;
	bottom: 0.75rem;
}

#Moments .comment_list{
	margin-bottom:0.5rem;
	display:inline-block;
}
#Moments .comment_list .comment_list_head{
	width:1.6rem;
	height:1.6rem;
	float: left;
}
#Moments .comment_list .comment_list_vessel{
	position: relative;
	margin-left:0.5rem;
	width:13.5rem;
	float: left;
}
#Moments .comment_list .comment_list_vessel .comment-list-name{
	color:blue;
	font-size:0.6rem;
}
#Moments .comment_list .comment-list-time{
	font-size:20px;
	position: absolute;
	right: 0;
	top: 0;
}
#Moments .comment_list .comment-list-news{
	font-size:0.8rem;
}

.compile{
	display: none;
	position: relative;
}

.compile .li{
	position:relative;
	height: 2.5rem;
	text-indent:1rem;
	line-height: 2.5rem;
	clear:left;
	
}
.compile .li .img_2{
	position: absolute;
	top:0.75rem;
	right:1rem;
	width: 1rem;
	height: 1rem;
	
}
.compile .li .divRight{
	position: absolute;
	width:3rem;
	height: 2rem;
	line-height: 2rem;
	background-color: #008000;
	color:white;
	top:0.25rem;
	right:1rem;
	text-indent: 0px;
	text-align: center;
}
.compile textarea{
	display: inline;
	height: 20vh;
	width: 90vw;
	margin-left:5vw;
	border: none;
	outline: none;
}
.compile .li .left{
	position: absolute;
	top:0.75rem;
	left:1rem;
	width: 1rem;
	height: 1rem;
}
.compile .rem5{
	float: left;
	width:5rem;
	height: 5rem;
	margin-left:1rem;
	margin-top:1rem;
    border:5px solid green;
	position: relative;
}
.compile .rem5-ul{
	width:100%;
}
.compile .rem5-ul .rem5-li{
	float: left;
	width:5rem;
	height: 5rem;
	margin-left:1rem;
	margin-top:1rem;
    border:5px solid green;
	position: relative;
}

.compile .rem5 .rem5-file{
	position: absolute;
	width:5rem;
	height:5rem;
	opacity: 0;
}
.compile .rem5 .rem5-row{
	position: absolute;
	width:3rem;
	height:1rem;
	top:2rem;
	left:1rem;
	background-color: greenyellow;
}
.compile .rem5 .rem5-col{
	position: absolute;
	width:1rem;
	height:3rem;
	top:1rem;
	left:2rem;
	background-color: greenyellow;

}
.compile .rem5 .rem5-img{
	width:5rem;
	height:5rem;
}

.changename{
	width:90vw;
	margin-left:5vw;
}
#changename{
	font-size: 1rem;
	display: none;
}
.changename header{
	position: relative;
	height: 3rem;
	line-height: 3rem;
	text-align: center;
}
.changename header img{
	width: 1rem;
	height: 1rem;
	position:absolute;
	left:0;
	top:1rem;
}
.changename header div{
	position: absolute;
	top:0.5rem;
	right: 0;
	width: 3rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	background-color: lightgray;
	color:gray;
}
.changename header .green{
	position: absolute;
	top:0.5rem;
	right: 0;
	width: 3rem;
	height: 2rem;
	font-size: 1rem;
	line-height: 2rem;
	text-align: center;
	background-color:green;
	color:white;
}
.changename input{
	font-size: 1rem;
	width:100%;
	border:none;
	outline:none;
	border-bottom:1px solid rgba(200,200,200,1) ;
}
.changename .input{
	border-bottom: 1px solid greenyellow;
}
.changename p{
	font-size: 0.5rem;
	color:gray;
}
#changeuser{
	display: none;
}
#uploadPhotoAsAvatar{
	display: none;
}
#uploadPhotoAsAvatar .bg{
	width:5rem;
	height: 5rem;
	
}
.headsrc{
	border-radius: 50%;
	width:2rem;
	height:2rem;
}
.seofriendly{
	display:none;
}
.seofriendly input{
    font-size: 1rem;
}
.seofriendly .ul{
	padding-top:2.5rem;
}
.seofriendly .ul .li{
	position: relative;
	list-style:none;
	height:3rem;
	line-height: 3rem;
	background-color: white;
	border-bottom: 1px solid rgba(200,200,200,0.8);
}
.seofriendly .ul .li .img{
	position: absolute;
	width:2rem;
	height:2rem;
	margin: 0.5rem;
	
}
.seofriendly .ul .li .span{
	margin-left:3.5rem;
	color: blue;
	
}
.AddFriend{
	font-size: 0.8rem;
	display: none;
}
.AddFriend .li-input{
	clear:left;
	text-align:center;
}
.AddFriend li textarea{
	outline:none;
	border:5px solid gray;
	border-radius:0.5rem;
	width:18rem;
	height:6rem;
	font-size:0.8rem;
}
.AddFriend li{
	list-style:none;
}
.AddFriend li .return-img{
	width:1rem;
	height:1rem;
	margin: 1rem;
}
.AddFriend .li .head-img{
	margin-bottom:1rem;
	margin-left:1rem;
	margin-right:1rem;
	width:5rem;
	height:5rem;
	float: left;
	border-radius: 0.5rem;
	border: 5px solid sandybrown;
}
.AddFriend .li .data-div{
	float: left;
	color: darkblue;
	border-bottom: 1px solid rgba(200,200,200,0.8);
}
.AddFriend .li .data-div .name-div{
	font-size: 1.2rem;
    border-bottom: 1px solid rgba(200,200,200,0.8);	
}
.AddFriend .li .data-div .data-2{
	font-size: 0.8rem;
	color:dimgray;
	border-bottom: 1px solid rgba(200,200,200,0.8);
}
.AddFriend .add{
	margin-top: 1rem;
	width: 20rem;
    height:3rem;
	font-size:1.2rem;
	color:white;
	text-align: center;
	clear:left;
}
.AddFriend .add div{
	margin:0 auto;
	width:18rem;
	height:2rem;
	line-height:2rem;
	border-radius: 1rem;
	background-color: #008000;
}
.FriendRequest{
    font-size: 0.8rem;
	display: none;
}
/* .heder{
	 position: relative;
	height:3rem;
	line-height: 3rem;
	font-size: 1rem;
	background-color: rgba(255,155,255,0.5);
	text-align: center;
} */

.FriendRequest .li{
	display: inline-block;
	margin-bottom: 1rem;
}
.FriendRequest ul{
	margin-top:3rem;
}
.FriendRequest .li .h-img{
	width: 2rem;
	height:2rem;
	margin-left: 0.5rem;
	float: left;
}
.FriendRequest ul .li .show-r{
	float: left;
	margin-left:0.5rem;
    top:0;
	width:15rem;
}
.FriendRequest ul .li .show-r .f-name{
	font-size: 1rem;
}
.FriendRequest ul .li .show-r .f-data{
	margin-bottom:1rem;
}

.FriendRequest ul .li .show-r .vuto{
	width: 50%;
	text-align: center;
	background-color: rgba(255,155,255,0.5);
	float: left;
}
.FriendRequest ul .li .show-r .consent{
	width: 50%;
	background-color: green;
	color:white;
	text-align: center;
	float: left;
}
.FriendRequest ul .li .show-r .f-data{
   border:1px solid rebeccapurple;
   border-radius: 5px;       
}
.Friendprofile{
	font-size:0.8rem;
	display: none;
}
.Friendprofile .f-right{
	margin-right:0.5rem;
	float: right;
}
.Friendprofile ul{
	margin-top:3rem;
}
.Friendprofile ul .text{
	text-align:center;
	color: blue;
	height: 3rem;
	border:1px solid rgba(200,200,200,0.6);
	line-height: 3rem;
}

.Friendprofile ul .li{
	clear:left;
	height: 3rem;
	border:1px solid rgba(200,200,200,0.6);
	line-height: 3rem;
	text-indent:1rem;
}
.Friendprofile ul .li .img{
	float: right;
	width:1rem;
	height:1rem;
	margin:1rem;
}
.Friendprofile .f-img{
	width: 4rem;
	height:4rem;
	border:5px solid goldenrod;
	border-radius:0.5rem;
	margin-left:1rem;
	float: left;
}

.Friendprofile .f-box{
	float: left;
	width:10rem;
	margin-left:1rem;
}
.Friendprofile .f-box .f-name{
	word-wrap:break-word;
	font-size:1.2rem;
	font-weight:bolder;
}

/* #dataSet input{
	width:50px;
	height:20rem;
} */
.hint-span{
    float: right;
	margin-right: 2rem;
	margin-top:0.5rem;
	display: block;
	width:2rem;
	height:1.5rem;
	font-weight:bolder;
	font-size: 1rem;
	text-align:center;
	border-radius:50%;
	background-color:chartreuse;
	line-height:1.5rem;
	color:red;
}
.groupChat{
	display: none;
}
.em{
	display:none;
}

